<template>
  <div class="layout">
    <loading :state="loading"></loading>
    <div class="a-body" v-for="(item,key) in address" :key="key">
      <div class="flex-r">
        <div class="left">
          <div class="flex-c">{{item.name}}</div>
          <div class="flex-c" @click="setDefault(item)" v-if="(item.isDefault == 1)">
            <span class="font">默认</span>
          </div>
        </div>
        <div class="center">
          <div class="phone">{{item.phone}}</div>
          <div class="address">{{item.province + item.city + item.area + item.detail}}</div>
        </div>
        <div class="right">
          <div @click="editAddress(item)">
            <span class="font" style="padding: 2px 8px 2px 8px">编辑</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" @click="addAddress">
      <btn-primary btn-text="新建地址"/>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import BtnPrimary from '../../components/common/BtnPrimary';

  export default {
    /** kebab-case */
    name: 'user-address',

    data() {
      return {
        address: [],
        loading: true,
        tru: Public.ossImg + 'choosed.svg',
        fal: Public.ossImg + 'choose1.svg'
      };
    },
    components: {
      BtnPrimary
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {},

    methods: {
      getIcon(icon) {
        return Public.iconImg + icon + '.svg';
      },
      setDefault(item) {
        this.loading = true;
        let data = {
          id: item.id,
          method: 'setDefault'
        };
        if (item.isDefault === '0') {
          this.$Cart.address('update', data).then(res => {
            this.loading = false;
            this.address.forEach((item) => {
              item.isDefault = '0';
            });
            item.isDefault = '1';
          }, () => {
            this.loading = false;
          });
        } else {
          this.loading = false;
        }
      },
      addAddress() {
        // todo 添加收货地址
        this.$router.push({name: 'userAddressEdit'});
      },
      editAddress(item) {
        console.log('editAddress:', item);
        this.$router.push({
          name: 'userAddressEdit', query: item
        });
      },
      deleteAddress(item) {
        this.loading = true;
        let data = {
          id: item.id,
          method: 'delete'
        };
        this.$UserReq.address('delete', data).then(res => {
          this.loading = false;
          this.address = this.address.filter(t => t.id !== data.id);
        }, () => {
          this.loading = false;
        });
      }
    },
    computed: {},
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    mounted() {
      this.$UserReq.address('all').then(res => {
        this.loading = false;
        console.log('getUserAddressAll:all', res);
        this.address = res.data;
      }, () => {
        this.loading = false;
      });
    },
    created() {
      // this.$UserReq.getUserAddressAll()
      //   .then((res) => {
      //     console.log('getUserAddressAll:;', res);
      //   });
      // this.$UserReq.AddUserAddress()
      //   .then((res) => {
      //     console.log(res);
      //   });
      // this.$UserReq.deleteUserAddress()
      //   .then((res) => {
      //     console.log(res);
      //   });
      // this.$UserReq.changeUserAddress()
      //   .then((res) => {
      //     console.log(res);
      //   });
      // this.$UserReq.setDefaultUserAddress()
      //   .then((res) => {
      //     console.log(res);
      //   });
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .layout
    width vw(375)
    height vw(667)
    font-family: PingFangSC-Regular
  .a-body
    background-color white
    line-height 2
    margin vw(15)
    border-radius vw(5)
    width vw(345)
    height vw(80)

  .left
    flex-x()
    word-vw(14, first-ash)
    height vw(80)
    width 20%
    display flex
    flex-direction column
    align-content center
    justify-content center
  .center
    flex-y()
    word-vw(14, first-ash)
    height vw(80)
    width 60%
    align-content center
    justify-content center
    .phone{
      word-vw(12, first-ash)
      margin-left -25vw
    }
  .right
    flex-y()
    word-vw(14, first-ash)
    height vw(80)
    width 20%
    align-content center
    justify-content center

  .font
    width vw(40)
    height vw(20)
    border-radius vw(15)
    border 1px solid main-color
    word-vw(12, main-color)
    line-height vw(20)
    text-align center
    justify-content center

  .top
    flex-x(flex-start)
    font-size word14
    color #333
    margin 0 vw(15)

  .address
    font-size word12
    color #999
    margin 0 vw(15)
  .line
    background-color #e0e0e0
    height 1px
    width 100vw
  .bottom
    flex-x()
    padding vw(10) vw(15) 0
    box-sizing border-box
    .font{
      word-vw(14,first-ash)
    }
  .flex-r
    flex-x()
    .center
      flex-center()
      margin-left vw(10)
      img
        width vw(12)
        height vw(12)
        margin-right vw(5)
  .flex-c
    flex-center()
    img
      width 4vw
      height 4vw
      margin-right vw(5)

  .footer
    position fixed
    z-index 1000
    bottom 0
    left 0
    width 100vw
    height 12vw
    flex-center()
    background white

</style>
